<template>
  <div id="app">
     <home-header :seller="seller"></home-header>
    <div class="tab border-1px">
        <div class="tab-item"><router-link to="/goods">商品</router-link></div>
        <div class="tab-item"><router-link to="/ratings">评论</router-link></div>
        <div class="tab-item"><router-link to="/seller">商家</router-link></div>
    </div>
    <div>
        <router-view :seller="seller"></router-view>
    </div>  </div>
</template>
<script>
    import homeHeader from './components/home/header'
    import axios from 'axios';
    import { urlParse } from '../js/util.js'

export default {
  name: "Home",
    components:{
        homeHeader,
    },
    data(){
      return{
         seller:{
             id:( () => {
                 setTimeout( ()=>{
                     console.log( urlParse() );
             let queryParam = urlParse()
             return queryParam.id;
         },20)

             })()
         }
      }
    },
    methods:{
      getDataInfo(){
          axios.get('/src/mock/appData?id='+this.seller.id)
              .then(this.getDataInfoSucc)
      },
        getDataInfoSucc(res){
          res =res.data;
          if(res){
              const data = res
              this.seller = data.seller
          }
        }
    },
    created(){
      this.getDataInfo()
    }
};
</script>
<style lang="stylus" scoped>
@import "~./stylus/border.styl"
    .tab
     display:flex
     width 100%
     height:40px
     line-height:40px
     border-1px(rgba(7,17,27,0.1))
     .tab-item
      flex:1
      text-align:center
      font-size:14px
      color:rgb(77,85,93)
      .active
          color:rgb(240,20,20)
</style>

